<template>
    <div id="bg">
        <h1>软件传媒信息平台<br>(v2.0)</h1>

        <div class="loginMain">
            <div class="loginBox loginFrom">
                <div class="title">登录</div>
                <div style="text-align: center;">
                    <input type="text" placeholder="请输入手机号" v-model="phone">
                    <input type="text" placeholder="请输入密码" v-model="password">
                </div>
                <div style="text-align: center;">
                    <button class="loginBtn" @click="login">登录</button>
                </div>
            </div>
            <div class="loginBox loginBg bgMove" @mousemove="move($event)" ref="bgMove">
                <div class="loginBgM">
                    <div class="title">河南科技大学</div>
                    <div class="title">软件学院 · 软件传媒</div>
                    <div class="title">申请账户或忘记密码请联系分管主席</div>
                </div>
            </div>
        </div>
        <div class="bottom">河南科技大学软件学院软件传媒 开发</div>
    </div>
</template>
  
<script setup>
import { onMounted, ref } from "vue"
import { useRouter, useRoute } from "vue-router"
import loginApi from "@/api/login"
import token from "@/api/token"
import { ElMessage } from 'element-plus'

const router = useRouter()
const route = useRoute()

let phone = ref("");
let password = ref("");
let bgMove = ref(null);
let isMove = ref(true);


function login() {
    loginApi.login(phone.value, password.value).then((res) => {
        if (res.data.length != 0) {
            let data = res.data[0]
            for (let key in data) {
                localStorage.setItem("haust-twxsh-" + key, data[key])
            }
            localStorage.setItem("haust-twxsh-token", token.getToken())
            if (route.query.path) {
                router.push(route.query.path)
            } else {
                router.push("/main")
            }
        } else {
            ElMessage.error('失败')
        }
    })
}

function move(event) {
    // event
    if (!isMove.value) {
        bgMove.value.classList.remove("bgMove")
        // console.log(event)
        bgMove.value.style.backgroundPosition = (event.offsetX / event.target.offsetWidth) * 100 + "% 80%"
        // console.log(event)
    }
}

onMounted(() => {
    bgMove.value.addEventListener("animationend", () => {
        isMove.value = false
    });
    if (localStorage.getItem("haust-twxsh-token")) {
        router.push("/main")
    }
})

</script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#bg {
    width: 100%;
    min-height: 100%;
    position: absolute;
    background-color: rgb(40, 77, 165);
    /* background: url(https://pic.imgdb.cn/item/62c42c165be16ec74aecff0c.jpg); */
}

h1 {
    font-size: 2.5em;
    text-align: center;
    color: white;
    margin-top: 20px;
}

.loginMain {
    display: flex;
    justify-content: center;
    align-items: center;
    /* flex-direction: column-reverse; */
    margin-top: 20px;
}

.loginBox {
    width: 45%;
    max-width: 500px;
    height: 300px;
    /* border-radius: 20px; */
}

@keyframes bgMove {
    0% {
        background-position: 0% 80%;
    }

    60% {
        background-position: 100% 80%;
    }

    100% {
        background-position: 40% 80%;
    }
}

.loginBg {
    background: url(https://pic.imgdb.cn/item/62dacd17f54cd3f9373d5dc4.jpg);
}

.bgMove {
    animation-name: bgMove;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.loginBgM {
    background: rgba(255, 255, 255, 0.8);
    height: 100%;
}

.loginFrom {
    background-color: rgb(255, 255, 255);
}

.title {
    font-size: 20px;
    padding: 10px;
}

.loginBtn {
    padding: 10px 20px;
    border: 3px solid #55aaff;
    background-color: #fff;
    margin: 20px;
    transition: all 0.5s;
}

.loginBtn:hover {
    background-color: #55aaff;
    color: white;
}

[type="text"] {
    /* text-align: center; */
    outline: none;
    padding: 10px;
    border: 0;
    border-bottom: 2px solid #CCC;
    transition: all 0.5s;
    width: 60%;
    margin-top: 15px;
}

[type="text"]:hover {
    /* text-align: center; */
    border-bottom: 2px solid #55aaff;
}

.bottom {
    color: white;
    font-size: 1.2rem;
    text-align: center;
    margin: 15px;
}

@media (max-width:620px) {
    .loginMain {
        flex-direction: column-reverse;
    }

    .loginBox {
        width: 90%;
        /* border-radius: 20px; */
    }

    .loginBg {
        transition: all 0.2s;
    }
}
</style>
  